<template>
  <div class="plane-container" :style="{ height: fixedHeight ? '' : '100%', width: fixedWidth ? '' : '100%' }">
    <template v-if="Array.isArray(data)">
      <div v-for="(row, rowIndex) in data" :key="'row' + rowIndex" class="data-row" :style="{ height: (cellHeight + 4) + 'px'}">
        <template v-if="Array.isArray(row)">
          <div
            v-for="(cell, cellIndex) in row"
            :key="'cell' + cellIndex"
            class="data-cell"
            :style="{
              height: (cellHeight + 4) + 'px',
              width: (cellWidth + 4) + 'px',
              'z-index': cell.rowspan > 1 || cell.colspan > 1 ? 2 : 1
            }"
          >
            <div
              v-if="cell.name"
              class="data-content van-ellipsis"
              :style="{
                height: cell.rowspan > 1 ? (cellHeight * cell.rowspan + (cell.rowspan - 1) * 4) + 'px' : (cellHeight + 'px'),
                width: cell.colspan > 1 ? (cellWidth * cell.colspan + (cell.colspan - 1) * 4) + 'px' : (cellWidth + 'px'),
                background: colorLib[activeRoleCode ? (cell.roleStatus[activeRoleCode] ? cell.roleStatus[activeRoleCode].status : 0) :cell.status],
                'z-index': cell.rowspan > 1 || cell.colspan > 1 ? 10 : 1,
                cursor: (activeRoleCode ? (cell.roleStatus[activeRoleCode] ? cell.roleStatus[activeRoleCode].status : 0) : cell.status) !== 0 ? 'default' : 'pointer'
              }"
              :title="cell.name"
              @click="cellClickHandle(cell)"
            >
              <span class="ellipsis2" :style="activeRoleCode === 'FDC_GCXT_ROLE_005' && cell.roleStatus[activeRoleCode] && !cell.roleStatus[activeRoleCode].isTimely ? 'color:#c30000':''">{{ cell.name }}</span>
            </div>
            <div v-else style="height: 28px; width: 90px;" />
          </div>
        </template>
        <template v-else>
          <div
            v-if="row.name"
            class="data-cell data-content van-ellipsis"
            :style="{
              width: fixedWidth ? (cellWidth + 'px') : '100%',
              height: fixedHeight ? (cellHeight + 'px') : '100%',
              background: colorLib[activeRoleCode ? (row.roleStatus[activeRoleCode] ? row.roleStatus[activeRoleCode].status : 0) :row.status],
              cursor: (activeRoleCode ? (row.roleStatus[activeRoleCode] ? row.roleStatus[activeRoleCode].status : 0) : row.status) !== 0 ? 'pointer' : 'default'
            }"
            :title="row.name"
            @click="cellClickHandle(row)"
          >
            <span :style="activeRoleCode === 'FDC_GCXT_ROLE_005' && row.roleStatus[activeRoleCode] && !row.roleStatus[activeRoleCode].isTimely ? 'color:#c30000':''">{{ row.name }}</span>
          </div>
          <div v-else style="width: 90px; height: 28px" />
        </template>
      </div>
    </template>
    <template v-else>
      <div
        class="data-cell data-content van-ellipsis"
        :style="{
          width: fixedWidth ? (cellWidth + 'px') : '100%',
          height: fixedHeight ? (cellHeight + 'px') : '100%',
          background: colorLib[activeRoleCode ? (data.roleStatus[activeRoleCode] ? data.roleStatus[activeRoleCode].status : 0) :data.status],
          cursor: (activeRoleCode ? (data.roleStatus[activeRoleCode] ? data.roleStatus[activeRoleCode].status : 0) : data.status) !== 0 ? 'pointer' : 'default'
        }"
        @click="cellClickHandle(data)"
      >
        <div
          v-if="data.percent"
          class="custom-divider"
          :style="{ bottom: `calc(${data.percent}% - 9px)`}"
        >
          <span class="custom-divider-text">{{ data.percent + '%' }}</span>
        </div>
        <span
          :style="activeRoleCode === 'FDC_GCXT_ROLE_005' && data.roleStatus[activeRoleCode] && !data.roleStatus[activeRoleCode].isTimely ? 'color:#c30000':''"
        >
          {{ data.name }}
        </span>
      </div>
    </template>
  </div>
</template>

<script>
export default {
  name: 'BuildingPlane',
  props: {
    // eslint-disable-next-line vue/require-prop-type-constructor
    data: { type: Array | Object, default: function() { return [] | {} } },
    unitType: { type: Number, default: null },
    cellWidth: { type: Number, default: 0 },
    cellHeight: { type: Number, default: 0 },
    fixedWidth: { type: Boolean, default: true },
    fixedHeight: { type: Boolean, default: true },
    extendParams: { type: Object, default() { return {} } },
    activeRoleCode: { type: String, default: null }
  },
  data() {
    return {
      colorLib: { 10: '#80C9B5', 11: '#EB9494', '-1': '#CCCC98', 0: '#CCC' }
    }
  },
  created() {

  },
  methods: {
    /**
     * 单元格点击处理
     * @param data 单元格数据
     */
    cellClickHandle(data) {
      data = Object.assign(data, this.extendParams)
      this.$emit('cellClick', data)
    }
  }
}
</script>

<style lang="scss" scoped>
.plane-container {
  display: inline-block;
  .data-row {
    display: flex;
    justify-items: left;
  }
  .data-cell {
    flex-shrink: 0;
    z-index: 1;
    position: relative;
  }
  .data-content {
    color: #FFF;
    margin: 2px;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    line-height: 1.2;
  }
}
.custom-divider{
  position: absolute;
  width: 100%;
  display: flex;
  align-items: center;
  border: 0 dashed red;
  .custom-divider-text {
    color: red;
  }
}
.custom-divider:before {
  content: '';
  display: block;
  flex: 1;
  box-sizing: border-box;
  height: 1px;
  border-color: inherit;
  border-style: inherit;
  border-width: 1px 0 0;
  margin-right: 10px;
  max-width: 10%;
}
.custom-divider:after {
  content: '';
  display: block;
  flex: 1;
  box-sizing: border-box;
  height: 1px;
  border-color: inherit;
  border-style: inherit;
  border-width: 1px 0 0;
  margin-left: 10px;
}

</style>
